<template>
    <div class="azm-f2-components" v-if="canvasId">
        <view class="h100 w100" :class="{'hide-canvas':isHideCanvas && shareImg}">
            <image @tap.stop="handleTapImage" class="azm-chart-img" v-if="isHideCanvas && shareImg" :src="shareImg"
                   mode="widthFix"></image>
            <!--#ifdef MP-WEIXIN | MP-ALIPAY-->
            <f2 ref="F2" class="f2-chart" :onInit="onInitChart" v-if="isShowF2Chart"/>
            <!--#endif-->
            <!--#ifdef H5 -->
            <canvas :id="canvasId" class="f2-chart" :disable-scroll="disableScroll"></canvas>
            <!--#endif-->
        </view>
    </div>
</template>

<script>
    // TODO: 因为微信跟小程序使用了 my-f2 & wx-f2，所有H5采用 @antv/f2
    // #ifdef H5
    import h5F2 from '@antv/f2';
    // #endif

    let F2;

    let initChart;

    export default {
        name: "f2",
        components: {},
        props: {
            canvasId: {
                type: String,
                default () {
                    return `chart-f2-${Date.now()}`
                }
            },
            disableScroll: {
                type: Boolean,
                default: false
            },
            isHideCanvas: {
                type: Boolean,
                default: false
            },
            // 数据列表
            dataList: {
                type: Array,
                default: () => []
            },
        },
        data () {
            return {
                shareImg: "",
                onInitChart: function (F2, config) {
                    const chart = new F2.Chart(config);
                    console.log(this, F2, config, 'f2图表');
                },
                isShowF2Chart: false
            };
        },
        watch: {},
        created () {
            this.isShowF2Chart = true;
            this.$nextTick(function () {
                console.log(this.$refs.F2, 'f2图表');
            })
        },
        methods: {
            initChart (F2, config) {
                const chart = new F2.Chart(config);
                console.log(this, F2, config, 'f2图表');
                // this.$emit("init", {F2, config})
            }
        }
    }
</script>

<style scoped lang="scss">
    .azm-f2-components {
        width: 100%;
        height: 100%;

        .f2-chart {
            width: 100%;
            height: 100%;
        }
    }
</style>
<style lang="less">
    .azm-f2-components {
    }
</style>
